<template>
    <div id="culture">
        <div class="culture-container">
            <div class="culture-title">
                {{ $t('cultureTitle')}}
            </div>
            <div class="culture-brief">
                {{ $t('cultureBrief')}}
            </div>
            <div class="culture-list"  data-aos="fade-up"  data-aos-once='true'>
                <div class="culture-list-item" v-for="(v,i) in $tm('cultureList')" :key="i">
                    <img :src="require(`@/assets/img/culture${i+1}.png`)" alt="" />
                    <div class="item-container">
                        <div class="num">
                            0{{ i+1 }}
                        </div>
                        <div class="name">
                            {{ v.name }}
                        </div>
                        <div class="label" :class="[$i18n.locale=='en'?'eng':'']">
                            {{ v.label }}
                        </div>
                        <div class="label-english" v-if="$i18n.locale!='en'">
                            {{ v.eng }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="serve" data-aos="fade-up"  data-aos-once='true'>
            <div class="serve-bg">
                <img src="@/assets/img/serve-bg.png" alt="">
            </div>
            <div class="serve-content">
                <div class="serve-l">
                    <img src="@/assets/img/logo.png" alt="" />
                </div>
                <div class="serve-r">
                    <h1>{{ $t('indexServeTitle') }}</h1>
                    <p>ShenZhen YANGWANG Technology company</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import AOS from "aos";
export default {
    name:"aboutUs",
    data(){
        return{

        }
    },
    mounted() {
        AOS.init({
            offset: 200,   
            duration: 600,   
            easing: 'ease-in-sine',   
            delay: 100
        })
    },
    methods:{
    }
}
</script>
<style lang="scss">
.index .commonHeader .headercontain{
    background: #273443;
}
#culture{
    width: 100%;
    .culture-container{
        width: 1200px;
        margin: 247px auto 52px;
        .culture-title{
            font-size: 70px;
            line-height: 101px;
            font-weight: bold; 
            color: #273443;
        }
        .culture-brief{
            font-size: 34px;
            line-height: 61px;
            color: #273443;
            opacity: .5;
        }
        .culture-list{
            width: 100%;
            margin: 80px auto 330.85px;
            @include display(center,between);
            flex-wrap: wrap;
            overflow: hidden;
            &-item{
                width: 710px;
                height: 640px;
                box-sizing: border-box;
                position: relative;
                margin:0 30px 38.15px 0;
                overflow: hidden;
                img{
                    width: auto;
                    height: 100%;
                    object-fit:cover;
                }
                .item-container{
                    position: absolute;
                    top: 0;
                    left: 0;
                    padding: 39.83px 52px 0 40px;
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(#004EAA 14%,rgba(39,52,67,.28));
                    z-index: 2;
                }
                .num{
                    font-size: 70px;
                    color: #fff;
                    opacity: .3;
                    font-weight: bold;
                }
                .name{
                    font-size: 60px;
                    line-height: 108px;
                    color: #fff;
                    margin: 51.61px 0 64.56px;
                }
                .label{
                    font-size: 36px;
                    line-height: 65px;
                    color: #fff;
                    white-space: nowrap;
                }
                .eng{
                    white-space: pre-line;
                }
                .label-english{
                    font-size: 30px;
                    line-height: 108px;
                    opacity: .5;
                    color: #fff;   
                    white-space: pre-line;
                }
            }
            &-item:nth-child(2n){
                margin:0 0 38.15px 0;
            }
            &-item:nth-child(3n-2){
                width: 460px;
            }
        }
    }
}
</style>